<template>
    <div class="comment-section">
        <div class="top">
            <img class="logo" :src="imgUrl" alt="">
            <div class="tip">
                <span class="name">{{ name }}</span>
                <span class="date">{{ date }}</span>
            </div>
        </div>
        <div class="content">
            {{ contentText }}
        </div>
    </div>
</template>

<script setup>
    import formatTime from "@/utils/formatTime.js"

    defineProps({
        imgUrl:{
            type:String,
            default:""
        },
        name:{
            type:String,
            default:"默认名称"
        },
        date:{
            type:String,
            default:formatTime(new Date(),"YYYY-MM-DD")
        },
        contentText:{
            type:String,
            default:"默认评论文本"
        }
    })
</script>


<style lang='less' scoped>
.comment-section {
    padding: 8px;
    background-color: #f7f9fb;
    border-radius: 8px;
    .top {
        display: flex;
        align-items: stretch;
        .logo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: orange;
            margin-right: 4px;
        }
        .tip {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
                font-size: 14px;
                color: #333;
            }
            .date {
                font-size: 12px;
                color: #888;
            }
        }
    }
    .content {
        font-size: 13px;
        color: #333;
        margin: 20px 0;
    }
}
</style>